/*
 * @Author: hongbin
 * @Date: 2022-03-30 14:53:30
 * @LastEditors: hongbin
 * @LastEditTime: 2022-04-05 21:27:56
 * @Description:ElementTree
 */
import { FC, ReactElement } from "react";
import styled from "styled-components";
import { useElementContext } from "../../context/ElementContext";
import { Delete } from "../../Icon";
import { flexCenter } from "../../styled";

interface IProps {}

const ElementTree: FC<IProps> = (): ReactElement => {
  const { current, setCurrent, elementTree, deleteElementNode } = useElementContext();

  return (
    <Container>
      {elementTree.map((node) => (
        <div
          onClick={() => {
            setCurrent(node);
          }}
          data-current={node.key === current?.key}
          key={node.key}
        >
          <span>{node.name}</span>
          <span
            onClick={(e) => {
              e.stopPropagation();
              deleteElementNode(node.key);
              if (current?.key === node.key) setCurrent(null);
            }}
          >
            {Delete}
          </span>
        </div>
      ))}
    </Container>
  );
};

export default ElementTree;

const Container = styled.div`
  background-color: #f6f3ed;
  & > div {
    user-select: none;
    background: #f1e9d8;
    padding: 0.1vw 0.5vw;
    margin: 2px;
    border-radius: 3px;
    font-size: 0.9vw;
    letter-spacing: 1px;
    &[data-current="true"] {
      background: #ffa026;
      font-size: 1vw;
      font-weight: bold;
    }
    display: flex;
    justify-content: space-between;
    align-items: center;

    span {
      ${flexCenter};
    }
    svg {
      width: 1.5vw;
      height: 1.5vw;
      transition: 0.3s linear;
      transform: scale(0.9);
      :hover {
        transform: scale(1.1);
        path {
          fill: #fffae5;
        }
      }
      :active {
        transition-duration: 0.1s;
        transform: scale(0.9);
      }
    }
  }
`;
